{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>列表组</li>
  </ol>
<section class="demo-section">
<div id="pageContent">




<section><header><h3>基本类型</h3></header><article><div class="example">
  <ul class="list-group">
    <li class="list-group-item">
      <a href="#">用ul &gt; li实现，点击区域只有文字</a>
    </li>
    <li class="list-group-item"><a href="#">待办</a></li>
    <li class="list-group-item"><a href="#">需求</a></li>
    <li class="list-group-item"><a href="#">任务</a></li>
    <li class="list-group-item"><a href="#">Bug</a></li>
    <li class="list-group-item">用例</li>
  </ul>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">项目</span><span class="tag">&lt;/a&gt;</span><span class="pln">
  </span><span class="tag">&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">待办</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">需求</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">任务</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">Bug</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;</span><span class="pln">用例</span><span class="tag">&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;/ul&gt;</span></code></pre></article></section>




<section><header><h3>链接</h3></header><article><p>直接为 <code>&lt;a&gt;</code> 添加 <code>.list-group-item</code> 类。</p><div class="example">
  <div class="list-group">
    <a href="#" class="list-group-item">用div &gt; a实现，实现整行点击</a>
    <a href="#" class="list-group-item">待办</a>
    <a href="#" class="list-group-item">需求</a>
    <a href="#" class="list-group-item active">任务</a>
    <a href="#" class="list-group-item">Bug</a>
    <a href="#" class="list-group-item">用例</a>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;</span><span class="pln">用div &gt;项目</span><span class="tag">&lt;/a&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;</span><span class="pln">待办</span><span class="tag">&lt;/a&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;</span><span class="pln">需求</span><span class="tag">&lt;/a&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item active"</span><span class="tag">&gt;</span><span class="pln">任务</span><span class="tag">&lt;/a&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;</span><span class="pln">Bug</span><span class="tag">&lt;/a&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;</span><span class="pln">用例</span><span class="tag">&lt;/a&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>





<script>
function afterPageLoad() {
    $('#pageContent').on('click', '.list-group > a.list-group-item', function() {
        var $item = $(this);
        $item.parent().children('.active').removeClass('active');
        $item.addClass('active');
    });
}
</script><section><header><h3>定制列表内容</h3></header><article><div class="example">
  <div class="list-group">
    <a href="#" class="list-group-item">
      <h4 class="list-group-item-heading">项目</h4>
      <p class="list-group-item-text text-muted">共12个新条目</p>
    </a>
    <a href="#" class="list-group-item active">
      <h4 class="list-group-item-heading">Bug</h4>
      <p class="list-group-item-text text-muted">没有未处理的bug</p>
    </a>
    <a href="#" class="list-group-item">
      <h4 class="list-group-item-heading">任务</h4>
      <p class="list-group-item-text text-muted"># 处理bug</p>
    </a>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;h4</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item-heading"</span><span class="tag">&gt;</span><span class="pln">项目</span><span class="tag">&lt;/h4&gt;</span><span class="pln">
    </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item-text text-muted"</span><span class="tag">&gt;</span><span class="pln">共12个新条目</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;/a&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item active"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;h4</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item-heading"</span><span class="tag">&gt;</span><span class="pln">Bug</span><span class="tag">&lt;/h4&gt;</span><span class="pln">
    </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item-text text-muted"</span><span class="tag">&gt;</span><span class="pln">没有未处理的bug</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;/a&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;h4</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item-heading"</span><span class="tag">&gt;</span><span class="pln">任务</span><span class="tag">&lt;/h4&gt;</span><span class="pln">
    </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item-text text-muted"</span><span class="tag">&gt;</span><span class="pln"># 处理bug</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;/a&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><div class="alert">示例中当点击列表组条目并应用高亮样式的效果是为演示方便有意添加的，并非列表自身交互功能。你仍然可以手动为 <code>.list-group-item</code> 添加 <code>.active</code> CLASS 来启用或移除高亮样式效果。</div></article></section></div>
</section>
{/block}